<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"

export default {
  name: "AddAnimatedCustom.component",
  components: {Maptalks},
  setup() {

    let mapOnLoadCB = (map) => {
      let layer = new maptalks.VectorLayer(MapLayerConst.MAP_CUSTOM_ANIMATION_LAYER).addTo(map);

      let marker = new maptalks.Marker(map.getCenter(), {
        "symbol": {
          "markerType": "ellipse",
          "markerWidth": 50,
          "markerHeight": 50,
          "markerFill": "rgb(216,115,149)",
          "markerFillOpacity": 0.8,
          "markerLineColor": "#fff",
          "markerLineWidth": 3
        }
      }).addTo(layer);

      let targetStyles = {
        "symbol": {
          "markerWidth": 200,
          "markerHeight": 200
        }
      };

      // animate by maptalks.animation.Animation
      let player = maptalks.animation.Animation.animate(
          targetStyles,
          {
            duration: 1000,
            easing: "out"
          },
          // callback of each frame
          function step(frame) {
            if (frame.state.playState === "running") {
              marker.updateSymbol(frame.styles.symbol);
            }
          }
      );

      setTimeout(function () {
        player.play();
      }, 600);
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped>

</style>
